<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./bootstrap-5.3.6-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./bootstrap-icons/bootstrap-icons.css">
    <script src="./vue.global.js"></script>
    <script src="./axios.min.js"></script>
    <script src="./echarts.min.js"></script>

    <title>HOME</title>

    <style>
        .bg-body-1 {
            height: 100%;
            padding: 15px;
            background: url(../images/data08.png) no-repeat #061537;
            background-size: cover;
            overflow: hidden;
            position: relative;
            z-index: -2;
        }

        /*header开始*/
        .header{
            width: 100%;
            height: 80px;
            padding:0 20px;
            min-width: 1366px;
        }
        .bg_header{
            width: 100%;
            height: 80px;
            background: url(../images/title.png) no-repeat;
            background-size: 100% 100%;
        }
        .header>.header_logo{
            padding:18px 10px 10px 0px;
        }
        .header>.header_logo>a{
            display: block;
        }
        .header>.header_logo>a>img{
            width:260px;
        }

        .header>.header_nav{
            margin-left: 20px;
        }
        .header>.header_nav>ul>li{
            float: left;
            margin-right: 6px;
            position: relative;
        }
        .header>.header_nav>ul>li>a{
            display: block;
            height: 80px;
            padding:0 10px 0 30px;
            line-height: 80px;
            color:#fff;
        }
        .header>.header_nav>ul>li>a:hover{
            border-bottom: 4px solid #4b8df8;
        }
        .header>.header_nav>ul>li>img{
            float: left;
            position: absolute;
            top: 33px;
            left:10px;
        }
        .header>.header_nav>ul>li>a.nav_current{
            border-bottom: 4px solid #4b8df8;
        }

        .header>.header_myself{
            width: 90px;
            text-align: center;
        }
        .header>.header_myself>p{
            color:#fff;
            font-size: 13px;
            margin-top: 15px;
        }
        .header>.header_myself>a{
            color:#fff;
            font-size: 13px;
        }

        .t_title{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #fff;
        }
        #chart_map{
            cursor: pointer;
        }
        .t_show{
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }

        /* 概览区域 */
        .overview{
            height: 5.583rem;
            width: 17rem;
        }
        .overview .inner{
            display: flex;
            justify-content: space-between;
        }
        .overview h4{
            font-size: 1.167rem;
            padding-left: 0.2rem;
            color: #fff;
            margin-bottom: 0.333rem
        }
        .overview span{
            font-size: 0.667rem;
            color: #4c9bfd;
        }

        .panel {
            /* 边框 */
            box-sizing: border-box;
            border: 2px solid red;
            border-image: url(../images/border.png) 51 38 21 132;
            border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
            position: relative;
            margin-bottom: 0.833rem;
        }
        .panel .inner {
            /* 装内容 */
            position: absolute;
            top: -2.125rem;
            right: -1.583rem;
            bottom: -0.875rem;
            left: -5.5rem;
            padding: 1rem 1.5rem;
        }
        .panel h3{
            font-size: 0.833rem;
            color: #fff;
        }

        /* 修改此处：使文本居中显示 */
        .child {
            margin-right: 55px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            text-align: center;
            margin-bottom: 0;
        }

        .flex-center {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        [class^="icon-"], [class*=" icon-"] {
            font-family: 'icomoon' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        .icon-dot:before {
            content: "\e900";
        }

        .first-text-color{
            color:#0EFCFF;
            margin-bottom: 0.5rem;
            text-align: center;
            width: 100%;
        }

        .value-text1 {
            margin-top: 20px;
            font-weight: bold;
            font-size: 1.5rem;
            color: #0EFCFF;
            text-align: center;
            width: 100%;
        }

        .value-text2 {
            margin-bottom: 30px;
            font-weight: bold;
            font-size: 1.5rem;
            color: #0EFCFF;
            text-align: center;
            width: 100%;
        }
    </style>
</head>

<body class="bg-body-1 px-4">
<div class="header">
    <div class="bg_header">
        <div class="header_nav fl t_title">
            徐工农机立体仓库数据看板
        </div>
    </div>
</div>
<div id="app" class="container-fluid py-3">
    <div class="d-flex justify-content-around mb-3">
        <div>
            <div class="overview panel">
                <div class="child">
                    <div class="value-text1">今日任务</div>
                    <div class="value-text2">
                        {{ transDailySummaryData.worktotal }}
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="overview panel ">
                <div class="child">
                    <div class="value-text1">已入库</div>
                    <div class="value-text2">
                        {{ transDailySummaryData.receivetotal }}
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="overview panel">
                <div class="child">
                    <div class="value-text1">已出库</div>
                    <div class="value-text2">
                        {{ transDailySummaryData.shiptotal }}
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="overview panel">
                <div class="child">
                    <div class="value-text1">作业中</div>
                    <div class="value-text2">
                        {{ transDailySummaryData.tasktotal }}
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="overview panel">
                <div class="child">
                    <div class="value-text1">总库位</div>
                    <div class="value-text2">
                        {{ storageWarehouseSummaryData.total }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-6 " >
            <div class="shadow rounded p-3 border">
                <div id="line-1" style="height:300px;"></div>
            </div>
        </div>
        <div class="col-6">
            <div class="shadow rounded p-3 border">
                <div id="line-2" style="height:300px;"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-6">
            <div class="shadow rounded p-3 border">
                <div id="line-3" style="height:300px;"></div>
            </div>
        </div>
        <div class="col-6">
            <div class="shadow rounded p-3 border">
                <div id="line-4" style="height:300px;"></div>
            </div>
        </div>
    </div>
</div>
<script>
    const webapi = axios.create({
        baseURL: '/api/wms/xcmg/report/kanban',
        timeout: 30000,
    });

    webapi.interceptors.request.use(
        function (requestConfig) {
            return requestConfig;
        },
        function (error) {
            return Promise.reject(error);
        }
    );

    webapi.interceptors.response.use(
        function (res) {
            const resData = res.data;
            if (res.request.responseType == "blob" || res.request.responseType == "arraybuffer") {
                return resData;
            }

            const code = resData.code;
            const msg = resData.message;

            if (code == 200) {
                return resData;
            } else if (code == 400) {
                return Promise.reject(msg);
            } else if (code == 500) {
                return Promise.reject(msg);
            } else {
                return Promise.reject("unknown error");
            }
        },
        function (error) {
            console.error(error.message);
            return Promise.reject(error);
        }
    );

    const { createApp, ref, onMounted } = Vue

    createApp({
        setup() {
            onMounted(() => {
                fetchStorageWarehouseSummary();
                fetchTransDailySummary();

                //日出入库/托
                webapi.post('/trans/dailyconssummary', { divisioncode: 'WH101' }).then((response) => {
                    var xAxisData = [];
                    var receivepaltotalData = [];
                    var shippaltotalData = [];
                    response.data.forEach(element => {
                        xAxisData.push(element.reportdate);
                        receivepaltotalData.push(element.receivepaltotal)
                        shippaltotalData.push(element.shippaltotal)
                    });

                    var seriesData = [
                        {
                            name: '出库任务',
                            type: 'line',
                            data: shippaltotalData,
                            label: {
                                show: true,
                            },
                            color: ['#ffd404'],
                        },
                        {
                            name: '入库任务',
                            type: 'line',
                            data: receivepaltotalData,
                            label: {
                                show: true,
                            },
                            color: ['#73c0de'],
                        },
                    ]

                    var chart1 = echarts.init(document.getElementById('line-1')).setOption({
                        title: {
                            text: '日出入库/托',
                            textStyle: {
                                fontSize: 14,
                                color: '#ffffff',
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            right: '0px',
                            data: ['出库任务', '入库任务'],
                            textStyle: {
                                color: '#ffffff',
                                fontSize: 12,
                                fontWeight: 'normal'
                            },
                        },
                        grid: {
                            left: '0px',
                            right: '0px',
                            bottom: '0px',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: xAxisData,
                            axisLabel: {
                                color: function(value, index) {
                                    var colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1'];
                                    return colors[index];
                                }
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: seriesData
                    });
                });

                //日出入库/种
                webapi.post('/trans/dailyconssummary', { divisioncode: 'WH101' }).then((response) => {
                    var xAxisData = [];
                    var receivematerialtotalData = [];
                    var shipmaterialtotalData = [];
                    response.data.forEach(element => {
                        xAxisData.push(element.reportdate);
                        receivematerialtotalData.push(element.receivematerialtotal)
                        shipmaterialtotalData.push(element.shipmaterialtotal)
                    });

                    var seriesData = [
                        {
                            name: '出库',
                            type: 'bar',
                            data: shipmaterialtotalData,
                            label: {
                                show: true,
                                position: 'top'
                            },
                            color: ['#ffd404'],
                        },
                        {
                            name: '入库',
                            type: 'bar',
                            data: receivematerialtotalData,
                            label: {
                                show: true,
                                position: 'top'
                            },
                            color: ['#73c0de'],
                        },
                    ]

                    var chart3 = echarts.init(document.getElementById('line-3')).setOption({
                        title: {
                            text: '日出入库/种',
                            textStyle: {
                                fontSize: 14,
                                color: '#ffffff',
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            right: '0px',
                            textStyle: {
                                color: '#ffffff',
                                fontSize: 12,
                                fontWeight: 'normal'
                            },
                        },
                        grid: {
                            left: '0px',
                            right: '0px',
                            bottom: '0px',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: xAxisData,
                            axisLabel: {
                                color: function(value, index) {
                                    var colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1'];
                                    return colors[index];
                                }
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: seriesData
                    });
                });

                //库龄统计/托
                webapi.post('/storage/stockeagesumm', { divisioncode: 'WH101' }).then((response) => {
                    var xAxisData = [];
                    var totalData = [];
                    response.data.forEach(element => {
                        xAxisData.push(element.typename);
                        totalData.push(element.total)
                    });

                    var chart4 = echarts.init(document.getElementById('line-4')).setOption({
                        title: {
                            text: '库龄统计/托',
                            textStyle: {
                                fontSize: 14,
                                color: '#ffffff',
                            }
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '0px',
                            right: '0px',
                            bottom: '0px',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: xAxisData,
                            axisLabel: {
                                color: function(value, index) {
                                    var colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1'];
                                    return colors[index];
                                }
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: totalData,
                                type: 'bar',
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                itemStyle: {
                                    color: function(params) {
                                        const colorList = ['#2f4554', '#61a0a8', '#d48265','#c23531'];
                                        return colorList[params.dataIndex % colorList.length];
                                    }
                                }
                            }
                        ]
                    });
                });
            })

            //存储汇总
            const storageWarehouseSummaryData = ref({
                divisionid: null,
                total: '-',
                workalltotal: '-',
                workepaltotal: '-',
                freetotal: '-',
                worktasktotal: '-'
            });
            function fetchStorageWarehouseSummary() {
                webapi.post('/storage/warehousesummary', { divisioncode: 'WH101' }).then((response) => {
                    storageWarehouseSummaryData.value = response.data;

                    //货位分布
                    var data = [
                        { name: '有货', value: response.data.workalltotal - response.data.workepaltotal },
                        { name: '空容器', value: response.data.workepaltotal },
                        { name: '空库位', value: response.data.freetotal },
                    ]
                    var chart2 = echarts.init(document.getElementById('line-2')).setOption({
                        title: {
                            text: '货位分布',
                            textStyle: {
                                fontSize: 14,
                                color: '#ffffff',
                            }
                        },
                        color: ['#91cc75', '#fac858', '#ee6666', '#73c0de'],
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            right: '0px',
                            textStyle: {
                                color: '#ffffff',
                                fontSize: 12,
                                fontWeight: 'normal'
                            },
                        },
                        grid: {
                            left: '0px',
                            right: '0px',
                            bottom: '0px',
                            containLabel: true
                        },
                        series: [
                            {
                                name: '货位分布',
                                type: 'pie',
                                radius: '50%',
                                data: data,
                                label: {
                                    formatter: '{b}\n{d}%\n[{c}]',
                                },
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    });
                });
            }

            //任务汇总
            const transDailySummaryData = ref({
                worktotal: '-',
                receivetotal: '-',
                shiptotal: '-',
                tasktotal: '-'
            });
            function fetchTransDailySummary() {
                webapi.post('/trans/dailysummary', { divisioncode: 'WH101' }).then((response) => {
                    transDailySummaryData.value = response.data;
                });
            }

            return {
                storageWarehouseSummaryData,
                transDailySummaryData
            }
        }
    }).mount('#app')
</script>
</body>
</html>
